// import TableList from "@components/templates/tablelist";
import imgUps from "@/image/logo_ups.svg"
import imgFedEx from "@/image/logo_fedex.svg"
import TableList from "@components/templates/customtablelist";
import { HttpSysAccountList, HttpCarrierList, HttpSysAccountChangeStatus } from '@/service/api/views'
import { mapState, mapGetters } from "vuex";
import compUpdate from './update.vue';
import mixins from '../mixin'
export default {
    mixins: [TableList,mixins],
    components: {
        compUpdate
    },
    data () {
        return {
            isMixin: true,
            Tools: { show: true },
            formData: {
                search: {
                }
            },
            Searchs: {
                show: true,
                labelWidth: 120,
            },
            Plugins: { show: true },
            carrierList:[
                {label: 'FedEx', value: 'FedEx'},
                {label: 'UPS', value: 'UPS'},
            ],
            exportData:{},
        }
    },
    created(){
        // HttpCarrierList().then(res=>{
        //     this.carrierList = res.data.map(item=>{
        //         return {
        //             value:item.carrierCode,
        //             label:item.carrierCode+' ('+item.carrierName+')',
        //         }
        //     })
        // })
    },
    methods: {
        ajaxRequest: HttpSysAccountList,
        interceptRequest (params) {
            this.exportData = params;
            return params
        },
        // toolsRender() { //自定义工具行
        //     return <div style="background: #fff;margin-bottom: 10px;padding: 5px;padding-left: 10px;">
        //             <Button type="primary" onClick={this.handleOperates.bind(this,{},'add')} icon="plus">添加</Button>
        //         </div>
        // },
        handleOperates (params = "", type, batch) {
            if (batch === true) {
                params = (params || this.checkedData.join(',')) + '';
                if (!params.length) return this.$Message.warning('请选择至少一条数据');
            }
            switch (type) {
                case 'add':
                    this.operate = {
                        show: true,
                        title: "添加账号",
                        component: "compUpdate",
                        querytype: 'add',
                        width: 1200,
                        showFooter: false
                    };
                    break;
                case 'query':
                    this.operate = {
                        title: '查看',
                        show: true,
                        width: 1200,
                        component: "compUpdate",
                        activeid: params,
                        querytype: 'query',
                        showFooter: false,
                    }
                    break;
                case 'queryBlank':
                    var url1 = this.$router.resolve({
                        name: 'tmsAccountManageUpdate',
                        params: { type: 'query' },
                        query: { id: params },
                    });
                    window.open(url1.href, '_blank');
                    break;
                case 'edit':
                    var url2 = this.$router.resolve({
                        name: 'tmsAccountManageUpdate',
                        params: { type },
                        query: { id: params },
                    });
                    window.open(url2.href, '_blank');
                    break;
                // case 'delete':
                //     this.operate={
                //         show: true,
                //         alert: "primary",
                //         params:{id:params},
                //         title: "删除操作",
                //         ajaxRequest:HttpDeleteReceiver
                //     }
                //     break;
                case 'changeStatus':
                    return new Promise((resolve) => {
                        this.operate = {
                            show: true,
                            alert: 'warning',
                            params: { id: params.id },
                            title: "修改状态",
                            ajaxRequest: HttpSysAccountChangeStatus,
                            callback:()=>{
                                this.$emit('on-update');
                                this.operate = {};
                            }
                        }
                    })
            }
        },
        getOperateNodeMap(row) {
            const { id } = row;
            return [
                {
                    label: "查看",
                    show: true,
                    params: id,
                    operate: "query"
                },
                {
                    label: "编辑",
                    show: this.handleAuth('cloudship.account.update'),
                    params: id,
                    operate: "edit"
                },
                // {
                //     label: "删除",
                //     show: true,
                //     params: id,
                //     operate: "delete"
                // }
            ];
        }
    },
    computed: {
        ...mapGetters('dictionary', []),
        ToolsData(){
            return [
                {
                    name: "添加",
                    theme: 'primary',
                    operate: 'add',
                },
            ]
        },
        // 搜索下拉框展示内容
        SearchsData () {
            return [
                {
                    label: 'Carrier',
                    key: 'EQ_carrierCode',
                    tag: 'Select',
                    options:this.carrierList,
                    show:true,
                    props:{
                        filterable: false
                    }
                },
                {
                    label: '账号别名',
                    tag: 'Input',
                    key: 'CN_accountName',
                    show:true,
                },
            ]
        },
        // table的展示数据
        columns () {
            return [
                {
					title: "序号",
					type: 'index',
                    align: "center",
					width: 60
				},
                {
                    title: "操作",
                    width: 90,
                    render: this.getOperateNodes
                },
                {
					title: "Carrier Type",
                    align: "center",
					width: 120,
                    render: (h, { row }) => {
                        return <div>{row.carrierType == 0 ? '快递' : '卡车'}</div>
                    }
				},
                {
					title: "Carrier",
                    align: "center",
					minWidth: 120,
                    render: (h, { row }) => {
                        let carrier = this.carrierList.filter(item=>item.value == row.carrierCode);
                        let obj = {}
                        if(carrier[0]){
                            obj = carrier[0]
                        }else{
                            obj = {label: row.carrierCode, value: '0' }
                        }
                        console.log('fuck', obj)
                        return <div>
                            <span v-show={obj.value == 'FedEx'|| obj.label.toUpperCase() == 'FEDEX'} title="Fedex">
                                <Tooltip placement="top" content="Fedex">
                                    {/* <span style="font-size: 40px;" class="iconfont icon-fedex"></span> */}
                                    <img src={imgFedEx} style="vertical-align: bottom;width:48px" />
                                </Tooltip>
                            </span>
                            <span v-show={obj.value == 'UPS'} title="UPS">
                                <Tooltip placement="top" content="UPS">
                                    {/* <span style="font-size: 40px;" class="iconfont icon-ups"></span> */}
                                    <img src={imgUps} style="vertical-align: bottom;width:20px" />
                                </Tooltip>
                            </span>
                            <span v-show={obj.value !== 'UPS' && obj.value !== 'FedEx' && obj.label.toUpperCase() !== 'FEDEX'}>{obj.label}</span>
                        </div>
                    }
				},
                {
					title: "账号别名",
                    key: "accountName",
                    align: "center",
                    render:(h,{row})=>{
                        return <div>
                            <div>
                                <a onClick={this.handleOperates.bind(this, row.id, 'query')}>{row.accountName}</a>
                                <a onClick={this.handleOperates.bind(this, row.id, 'queryBlank')}><Icon class="margin-left-10 font-14" type="ios-browsers-outline" /></a>
                            </div>
                        </div>
                    },
					minWidth: 120
				},
                {
					title: "状态",
                    key: "active",
                    align: "center",
					width: 80,
                    render: (h, { row }) => {
                        let active = row.active == 1 ? true : false;
                        return <Switch v-model={active} before-change={this.handleOperates.bind(this, { id:row.id }, 'changeStatus')}/>
                    }
				},
                {
                    title: "创建时间",
                    align: "center",
                    render: (h, { row })=>{
                        return <div>{row.createdAt || '--'}</div>
                    }
                },
            ];
        },

    },

};
